<template>
  <Modal
      :draggable="!$config.mask"
      :mask="$config.mask"
      :mask-closable="!$config.mask"
      :value="value"
      @on-visible-change="visibleChange"
      :width="800"
  >
    <p slot="header">
      通知详情
    </p>
    <Row :gutter="10" style="margin-bottom:4px;">
      <Col class="key" span="3">通知标题：</Col>
      <Col class="value" span="21"><span v-html="title"></span></Col>
    </Row>
    <Row :gutter="10" style="margin-bottom:4px;">
      <Col class="key" span="3">创建时间：</Col>
      <Col class="value" span="21">{{ creationTime }}</Col>
    </Row>
    <Row :gutter="10">
      <Col class="key" span="3">通知内容：</Col>
      <Col class="value" span="21">
      </Col>
    </Row>
    <Row :gutter="10" style="margin-top:10px;">
      <Col class="value" span="24">
        <div style="width:100%;border:1px solid #e8eaec;background-color:#f8f8f9;padding:10px;overflow:auto;" class="beautiful-bar">
          <render-cell :render="content"></render-cell>
        </div>
      </Col>
    </Row>
    <div slot="footer">
      <Button icon="md-close" @click="cancel">关闭</Button>
    </div>
  </Modal>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import Notify from '@/lib/notify';
import Util from '@/lib/util';
import RenderCell from '@/components/common/render';

@Component({
  components: {RenderCell},
})
export default class NotificationModal extends AbpBase {
  name: string = 'NotificationModal';

  @Prop({type: Boolean, default: false}) value: boolean;
  @Prop({type: Object}) modalData: any;

  get title() {
    return Notify.message(this.modalData).title;
  }

  get content() {
    return Notify.message(this.modalData).render;
  }

  get creationTime() {
    return Util.getTime(this.modalData.notification.creationTime);
  }


  cancel() {
    this.$emit('input', false);
  }

  visibleChange(value: boolean) {
    if (!value) {
      this.$emit('input', value);
    }
  }


}
</script>

<style lang="less" scoped>
.key {
  text-align: right;
}

.value {
  text-align: left;
}
</style>
